<template>
  <transition name="imageAnimate" appear @after-leave="unmountInstance">
    <div className="test-wrap-root"  key="side-bar" v-show="visible">
      <div className="test-wrap-mask"></div>
      <div className="test-wrap-preview-wrap">
        <div className="test-wrap-preview-content">
          <ul className="preview-img-operations">
            <li>
              <CloseOutlined @click="visible = false" />
            </li>
            <li>
              <ZoomInOutlined @click="scallAdd(1)"/>
            </li>
            <li>
              <ZoomOutOutlined @click="scallAdd(-1)" :style=" scaling === 1 ? {cursor: 'not-allowed'} : {} "/>
            </li>
            <li>
              <RotateRightOutlined @click="rotate('right')" />
            </li>
            <li>
              <RotateLeftOutlined @click="rotate('left')"/>
            </li>
          </ul>
          <div className="preview-img-wrapper" ref="imgWrapRef">
            <a-spin tip="正在加载..." :spinning="spinning" wrapperClassName="spining-wrap" size="large">
              <img
                className="image-preview-img"
                :src="url"
                ref="imgRef"
                alt=""
                :style="{ transform: `scale3d(${scaling}, ${scaling}, 1) rotate(${transformDeg}deg)` }"/>
              </a-spin>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

import { message } from 'ant-design-vue';

import { ref, onMounted, onBeforeUnmount } from 'vue'

import { CloseOutlined, ZoomInOutlined, ZoomOutOutlined, RotateRightOutlined, RotateLeftOutlined } from '@ant-design/icons-vue';

export default {
  components: { CloseOutlined, ZoomInOutlined, ZoomOutOutlined, RotateRightOutlined, RotateLeftOutlined },
  props: {
    unmountInstance: {
      type: Function,
      default: () => {}
    },
    src: {
      type: String,
      default: ''
    }
  },
  setup({unmountInstance, src}) {
console.log('执行预览操作')
    const imgRef = ref('')
    const imgWrapRef = ref('')

    const visible = ref(true)
    const transformDeg = ref(0)
    const scaling = ref(1)
    const spinning = ref(true)
    const url = ref('')

    const afterLeave = () => {
      console.log('afterLeave')
      console.log(unmountInstance)
    }

    const scallAdd = (num) => {
      !(scaling.value === 1 && num === -1) && (scaling.value += num)
    }

    const  rotate = (type) => {
      if (type === 'left') transformDeg.value -= 90
      if (type === 'right') transformDeg.value += 90
    }

    const initImgMoveEvent = () => {
      const dom = imgRef.value
      const domWrap = imgWrapRef.value

      dom.onmousedown = (e) => {
        e.preventDefault()      // 去掉 图片的 默认 拖动 效果
        dom.style.cursor = 'grabbing'
        domWrap.style.transition = ''
        const {x:cx, y:cy} = e

        const { style } = domWrap
        document.onmousemove = ({ x, y }) => {
          style.transform = `translate3d(${x - cx}px, ${y - cy}px, 0px)`
        }
      }
      document.onmouseup = () => {
        document.onmousemove = null
        domWrap.style.transition = 'transform .3s cubic-bezier(.215,.61,.355,1) 0s'
        dom.style.cursor = 'grab'
        domWrap.style.transform = `translate3d(0px, 0px, 0px)`
      }
    }

    const loadImg = () => {
      const newImg = new Image()
      newImg.src = src

      newImg.onerror = () => {
        url.value = '/static/images/img-404.png'
        spinning.value = false
        message.error('图片加载出错！')
      }
      newImg.onload = () => {
        url.value = newImg.src
        spinning.value = false
      }
    }

    onMounted(() => {
      loadImg()
      initImgMoveEvent()
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
      const dom = imgRef.value
      dom && (dom.onmousedown = null)
      dom && (dom.onmouseup = null)
    })

    return {
      visible,
      afterLeave,
      rotate,
      transformDeg,
      scaling,
      scallAdd,
      imgWrapRef,
      imgRef,
      spinning,
      url
    }
  }
}
</script>

<style lang="less" scoped>

.imageAnimate-enter-active,
.imageAnimate-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: all 0.15s ease-in;
}

.imageAnimate-enter-from,
.imageAnimate-leave-to {
  opacity: 0;
  transform: scale(0.6, 0.6);
}

</style>

<style scoped lang="less">

.test-wrap-root{
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  .spining-wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .test-wrap-mask{
    background-color: rgba(0, 0, 0, .45);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
  }
  .test-wrap-preview-wrap{
    bottom: 0;
    left: 0;
    outline: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1080;
    overflow: hidden;
    .test-wrap-preview-content{
      height: 100%;
      pointer-events: none;
      text-align: center;
      .preview-img-operations{
        align-items: center;
        background: rgba(0, 0, 0, 0.7);
        box-sizing: border-box;
        color: rgba(0, 0, 0, .85);
        color: hsla(0, 0%, 100%, .85);
        display: flex;
        flex-direction: row-reverse;
        font-feature-settings: "tnum";
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        margin: 0;
        padding: 0;
        pointer-events: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 1;
        li{
          cursor: pointer;
          font-size: 18px;
          font-weight: bold;
          margin-left: 12px;
          padding: 12px;
        }
      }
      .preview-img-wrapper{
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        overflow: hidden;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        .image-preview-img{
          cursor: -webkit-grab;
          cursor: grab;
          max-height: 100%;
          max-width: 100%;
          pointer-events: auto;
          transform: scaleX(1);
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          vertical-align: middle;
          transition: transform .3s cubic-bezier(.215, .61, .355, 1) 0s;
        }
      }
    }
  }


}
</style>